import React ,{useContext} from 'react';
import { css } from 'emotion';
import defaultExercises from '../../../statics/defaultExercises';
import {context} from '../../../context';
import useMindmap from '../../../customHooks/useMindmap';
import {findParentNode} from '../../../methods/assistFunctions';
import MultiCheckBox from './MultiCheckBox'


const ConditionBox = ({node}) => {

    // const mindmapHook=useMindmap();
    const { mindmap: { state: root_node } } = useContext(context);

    return (<div >
        {(()=>{
            let parent=findParentNode(root_node,node.id);
            console.log(parent)
            let exercises=Object.keys(parent.data.exercises).map((exercise_index)=>{
                return {index:exercise_index,value:defaultExercises[exercise_index]}
            })
            return <MultiCheckBox node={node} exercises={exercises} ></MultiCheckBox>
        })()}
        
    </div>);
};

export default ConditionBox;

// CSS
const wrapper = css`
display: flex;
position: absolute;
bottom: calc(100% + 5px);
left:0;
background-color: #ffffff;
width: max-content;
height: 50px;
padding: 0 8px;
font-size: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 5px 5px 10px #aaaaaa;
`;